09-10-2021

Mounting

當組件被初始化，第一次被放入DOM時。

ComponentDidMount()

在安裝階段調用的最後一個辦法
-constructor
-render()
-componentDidmount()
==在渲染後調用==

import React from 'react';

export class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  render() {
    return <div>{this.state.date.toLocaleTimeString()}</div>;
  }
  componentDidMount() {
    const oneSecond = 1000;
    this.intervalID=setInterval(() => {
      this.setState({ date: new Date() });
    }, oneSecond);
  }

  componentWillUnmount(){
    clearInterval(this.intervalID)
  }
}

將要改變的 interval ID 存在變數intervalID內
但還不會有作用要與下方的方法和用

 this.intervalID=setInterval(() => {
      this.setState({ date: new Date() });
    }, oneSecond);

將組建移除
在卸載階段調用，就在組件完全銷毀之前

  componentWillUnmount(){
    clearInterval(this.intervalID)
  }

componentDidUpdate()

• Mounting，當組件被初始化並第一次放入 DOM 時。我們看到constructor, render(), 和componentDidMount()在這個階段被調用。
• Updating, 當組件由於更改狀態或更改props而更新時。，render()並componentDidUpdate()在這個階段被調用。
• Unmounting, 當組件從 DOM 中移除時。我們看到componentWillUnmount()這裡被調用了，這是清理東西的好時機。

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
精確模式：

import React from 'react';

export class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  render() {
    return (
      <div>
        {this.props.isPrecise
          ? this.state.date.toISOString()
          : this.state.date.toLocaleTimeString()}
      </div>
    );
  }
  startInterval() {
    let delay;
    if (this.props.isPrecise) {
      delay = 100;
    } else {
      delay = 1000;
    }
    this.intervalID = setInterval(() => {
      this.setState({ date: new Date() });
    }, delay);
  }
  componentDidMount() {
    this.startInterval();
  }
  componentDidUpdate(prevProps) {
    if (this.props.isPrecise === prevProps.isPrecise) {
      return;
    }
    clearInterval(this.intervalID);
    this.startInterval();
  }
  componentWillUnmount() {
    clearInterval(this.intervalID);
  }
}

第一步：創建一個方法 componentDidUpdate()，將渲染後的參數 prevProps 帶入

第二步：如果this.props.isPrecise沒有改變，現在停止下來，不要做接下來的步驟。

第三步：刪除原有的componentWillUnmount()。componentWillUnmount()— 以 開頭的單行的正文clearInterval(...。

第四步（目的）：開始一個新的間隔。如果在“精確”模式下，它應該每 100 毫秒運行一次。否則，它應該像以前一樣每 1000 毫秒運行一次。

 componentDidUpdate(prevProps) {
    if (this.props.isPrecise === prevProps.isPrecise) {
      return;
    }
    clearInterval(this.intervalID);
    this.startInterval();
  }

建立新的間隔，在componentDidUpdate()中建立，新的變數為delay，並設置為100 否則為1000。使精確模式更為頻繁的更新

並創立一個新的方法：startInterval()，負責計算延遲的時間（100毫秒或是1000毫秒）

並且在componentDidMount() \ componentDidUpdate() 調用他

以下的有使用到此方法的地方都要更換。

  startInterval() {
    let delay;
    if (this.props.isPrecise) {
      delay = 100;
    } else {
      delay = 1000;
    }
    this.intervalID = setInterval(() => {
      this.setState({ date: new Date() });
    }, delay);
  }